<template>
  <div class="role-list">
    <div class="header">
      <el-button type="primary" @click="onOperation({}, 'add')"
        ><el-icon style="margin-right: 2px"><Plus /></el-icon
        >新增角色</el-button
      >
    </div>
    <el-table
      :data="list"
      :cell-style="{ background: '#fff' }"
      class="all-table"
      style="width: calc(100% - 40px); margin-left: 20px"
    >
      <el-table-column label="序号" prop="id" align="center" />
      <el-table-column label="角色名称" prop="roleName" align="center" />
      <el-table-column label="角色描述" prop="remark" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="状态" prop="status" align="center">
        <template #default="scope">
          <span>
            {{ scope.row.status.code === 1 ? '启用' : '禁用' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <span @click="changeRole(scope.row)" class="theme-color cursor"
            >{{ scope.row.status.code == 0 ? "启用" : "禁用" }}
          </span>
          <span
            @click="onOperation(scope.row, 'edit')"
            class="theme-color cursor ml20"
            >编辑
          </span>
          <span
            @click="onOperation(scope.row, 'del')"
            class="theme-color cursor ml20"
          >
            删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <h-page
      v-if="total"
      v-model:curr-page="params.current"
      :size="params.size"
      :total="total"
    />
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { baseMsg, elMessageTip } from "@/utils/utils";
import { GetRoleList, UpdateRoleStatus, DeleteRole } from "@/api/system";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      total: 0,
      list: [],
      params: {
        name: route.query.search || "",
        current: Number(route.query.page) || 1,
        size: Number(route.query.size) || 10,
      },
      IsShowRole: false,
      RoleFrom: {},
    });
    const GetList = () => {
      state.IsShowRole = false;
      GetRoleList(state.params).then((res) => {
        if (res.code == 4201 || res.code == 4202) {
          res.data.records.map((item) => {
            item.isStatus = item.status == 1;
          });
          state.list = res.data.records;
          state.total = res.data.total;
        }
      });
    };
    watch(
      () => route.query,
      () => {
        state.params.current = Number(route.query.page) || 1;
        GetList();
      },
      { deep: true }
    );

    const onOperation = (i, type) => {
      if (type != "del") {
        router.push({
          path: "/quanxian/jueseEdit",
          query: {
            id: i.id,
            type,
          },
        });
      }
      if (type == "del") {
        elMessageTip({
          ok() {
            DeleteRole({
              id: i.id,
            }).then((res) => {
              if (res.code == 4201 || res.code == 4202) {
                baseMsg("删除成功");
                GetList();
              }
            });
          },
        });
      } else {
        state.RoleFrom = {
          isAdd: type === "add",
          id: i.id,
        };
        state.IsShowRole = true;
      }
    };
    const changeRole = (item) => {
      console.log(item);
      let params = {
        ...item,
      };
      UpdateRoleStatus(params).then((res) => {
        if (res.code == 4201 || res.code == 4202) {
          baseMsg("修改成功");
          GetList();
        }
      });
    };
    GetList();
    return {
      ...toRefs(state),
      GetList,
      onOperation,
      changeRole,
    };
  },
});
</script>
<style lang="scss">
.role-list {
  width: 100%;
  background-color: #fff;
  padding-bottom: 30px;
  .header {
    padding: 20px;
    height: auto;
    box-sizing: border-box;
    line-height: 20px;
  }
}
</style>
